<template>
	<view class="canvasPage" :style="{height:hei+'px'}">
		<!-- 海报图片 -->
		<view class="shareCanvas" canvas-id="shareCanvas" id="shareCanvas" :style="{width:'750rpx',height:img_hei}"
			ref="shareCanvas">
			<image :src="posterData.purl" @load="imgs" mode="widthFix" :style="{width: '750rpx',height:img_hei}">
			</image>
			<!-- <view class="QRCode list" @touchstart="QRCode_cas_move" @touchmove.stop.prevent="QRCode_cas_move"
				@touchend="isDianjie" :style="{left:QRCodeTouch.left + 'px',top:QRCodeTouch.top + 'px' }"> -->
			<view class="QRCode list" :class="isShow ? 'visibilityH' : '' " :style="{left:QRCodeTouch.left + 'px',top:QRCodeTouch.top + 'px'}">
				<image :src="posterData.qcode" mode="widthFix" :style="{width:imgwidHti+'px',height:imgwidHti+'px'}"
					id="views" @load="view_chushi"></image>
				<view class="text" id="text1">{{posterData.qtext}}</view>
			</view>
			<view class="userInfo list" :class="isShow1 ? 'visibilityH' : '' " @touchstart="userInfo_cas_move" @touchmove.stop.prevent="userInfo_cas_move"
				@touchend="isDianjie" :style="{left:userInfoTouch.left + 'px',top:userInfoTouch.top  + 'px' }">

				<image :src="posterData.userimg" :style="{width:imgwidHti+'px',height:imgwidHti+'px'}" mode="widthFix"
					id="views1" ref="views1" @load="user_view_chushi"></image>
				<view class="text" id="text">{{posterData.usertext}}</view>
			</view>
		</view>
		<view class="" style=" width: 100%;height: 200rpx;"></view>
		<view class="cart_box">
			<view class="view1 flex-c-c-c">
				<view class="flex-c-c-c" :style=" isBtn ? 'background-color: #45806E;' : 'background-color: #999;' " @click="btnsss">
					<text>点击生成保存</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true,
				isShow1: true,
				isClick: true,
				id: null,
				hei: this.$hei,
				posterData: {},
				canvasWidth: uni.getSystemInfoSync().windowWidth,
				winHei: 0,
				QRCodeTouch: {
					top: 0,
					left: 0,
					right: 0,
					bottom: 0
				},
				userInfoTouch: {
					top: 0,
					left: 0,
					right: 0,
					bottom: 0
				},
				img_hei: '100%',
				heiVie1: {},
				userView: {},
				isDJView: false,
				isDJUser: false,
				imgwidHti: 100,
				bili: {
					left: 0,
					top: 0
				},
				isBtn: true
			}
		},
		onLoad(el) {
			this.id = el.id
			this.getImageData(el.id) // 获取海报的数据
		},

		onShow() {

		},
		methods: {
			
			btnsss() {
				let that = this
				that.isBtn = false
				if(!that.isClick) return uni.showToast({ title: '正在下载，请勿重复点击', icon: 'none' })
				that.isClick = false
				const query = uni.createSelectorQuery().in(that);
				query.select('#text').boundingClientRect().exec(data1 => {
					query.select('#text1').boundingClientRect().exec(data => {
						let obj = {
							id: that.id,
							user: [{
								left: that.userInfoTouch.left * that.bili.left,
								top: that.userInfoTouch.top * that.bili.top
							}, {
								left: data[0].left * that.bili.left,
								top: (data[0].top - 5) * that.bili.top
							}],
							code: [{
								left: that.QRCodeTouch.left * that.bili.left,
								top: that.QRCodeTouch.top * that.bili.top
							}, {
								left: data[1].left * that.bili.left,
								top: (data[1].top - 5) * that.bili.top
							}]
						}
						that.$api.savePoster_dara(obj).then(res => {
							uni.downloadFile({
								url: res.data.data.img,
								success(res) {
									if (res.statusCode === 200) {
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success() {
												uni.showToast({
													title: '保存成功',
													icon: 'none'
												})
												that.isClick = true
												that.isBtn = true
												let pages = getCurrentPages()
												let page = pages[pages.length - 2]
												page.$vm.page = 1
												page.$vm.list = []
												page.$vm.getGeneratePoster()
												uni.navigateBack()
											},
											fail() {
												that.isClick = true
												that.isBtn = true
												uni.showToast({
													title: '保存失败',
													icon: 'none'
												})
											}
										})
									}
								}
							})
						})
					});
				});
			},
			
			// 获取海报的数据
			getImageData(id) {
				let that = this
				that.$api.poster_data({
					id: id
				}).then(res => {
					that.posterData = res.data.data
					let user = uni.getStorageSync('user_info')
					that.posterData.userimg = JSON.parse(user.rawData).avatarUrl
				})
			},
			imgs(el) {
				let hei = el.detail.height
				let wid = el.detail.width
				let beishu = Number(wid) / Number(this.canvasWidth)
				this.img_hei = Number(hei) / beishu + 'px'
				this.winHei = Number(hei) / beishu
				this.imgwidHti = Number(this.canvasWidth) / 6
				let that = this
				uni.pageScrollTo({
					scrollTop: Number(hei) / beishu + 100,
					duration: 100
				});
				this.bili = {
					left: Number(el.detail.width) / Number(this.canvasWidth),
					top: Number(el.detail.height) / Number(this.winHei),
				}
			},
			view_chushi() {
				let that = this
				let query = uni.createSelectorQuery().select('#views');
				query.boundingClientRect(data => {
					let data1 = JSON.parse(JSON.stringify(data))
					that.heiVie1 = data1
					that.QRCodeTouch = {
						top: Number(that.winHei) - Number(data1.height) - 50,
						bottom: Number(that.winHei) - Number(data1.height) + Number(data1.height) -
							50,
						left: Number(that.canvasWidth) - Number(data1.width) - 100,
						right: Number(that.canvasWidth) - Number(data1.width) + Number(data1
							.width) - 100
					}
				}).exec();
				setTimeout( () => {
					that.isShow = false
				}, 500)
			},
			user_view_chushi(i) {
				setTimeout(() => {
					let that = this
					let query = uni.createSelectorQuery().select('#views1');
					query.boundingClientRect().exec(data => {
						console.log(data[0])
						that.userView = data[0].height === 100 ? JSON.parse(JSON.stringify(that.heiVie1)) :
							data[0]
						let bottom = Number(that.winHei) - Number(data[0].height) + Number(data[0]
								.height) - 50,
							top = Number(that.winHei) - Number(data[0].height) - 50;
						// that.userView = data[0]
						that.userInfoTouch = {
							top: top === 0 ? that.QRCodeTouch.top : top,
							bottom: bottom === 100 ? that.QRCodeTouch.bottom : bottom,
							left: 0 + 100,
							right: data[0].right === 100 ? that.QRCodeTouch.right : Number(data[0]
								.width) + 100
						}
					});
				}, i === 11111 ? 0 : 500)
				setTimeout( () => {
					this.isShow1 = false
				}, 800)
			},
			isDianjie() {
				this.isDJView = false
				this.isDJUser = false
			},
			QRCode_cas_move(res) {
				if (this.isDJView) return
				let el = res.touches[0]
				let top = res.touches[0].clientY,
					bottom = res.touches[0].clientY + this.heiVie1.height,
					left = res.touches[0].clientX,
					right = res.touches[0].clientX + this.heiVie1.width;
				let right111 = right < this.heiVie1.width ? this.heiVie1.width : right > this.canvasWidth ?
					this
					.canvasWidth : right
				let bottom111 = bottom < this.heiVie1.height ? this.heiVie1.height : bottom > this.winHei ?
					this.winHei
					.height : bottom
				let Xtrue = el.clientX > this.userInfoTouch.left && el.clientX < this.userInfoTouch
					.right //(左边)是否和另一个在同一x轴
				let Ytrue = el.clientY > this.userInfoTouch.top && el.clientY < this.userInfoTouch
					.bottom //(左边)是否和另一个在同一Y轴
				let rightX = right111 > this.userInfoTouch.left && right111 < this.userInfoTouch
					.right //(右边)是否和另一个在同一x轴
				let bottomY = bottom111 > this.userInfoTouch.top && bottom111 < this.userInfoTouch
					.bottom //(右边)是否和另一个在同一Y轴
				if (Xtrue) { //判断是否在同一x上 方块右部触碰
					if (Ytrue || bottomY) {
						this.view_chushi()
						uni.showToast({
							title: "分享二维码不能放在头像上哦",
							icon: "none"
						})
						this.isDJView = true
					}

				}
				if (rightX) { //方块左部触碰
					if (bottomY || Ytrue) {
						this.view_chushi()
						uni.showToast({
							title: "分享二维码不能放在头像上哦",
							icon: "none"
						})
						this.isDJView = true
					}
				}
				if (Ytrue) { //方块底部触碰
					if (Xtrue || rightX) {
						this.view_chushi()
						uni.showToast({
							title: "分享二维码不能放在头像上哦",
							icon: "none"
						})
						this.isDJView = true
					}
				}

				if (bottomY) { //方块顶部触碰
					if (Xtrue || rightX) {
						this.view_chushi()
						uni.showToast({
							title: "分享二维码不能放在头像上哦",
							icon: "none"
						})
						this.isDJView = true
					}
				}
				this.QRCodeTouch = {
					top: top < 0 ? 0 : top > this.winHei - this.heiVie1.height ? this.winHei - this.heiVie1
						.height : top,
					bottom: bottom < this.heiVie1.height ? this.heiVie1.height : bottom > this.winHei ?
						this.winHei
						.height : bottom,
					left: left < 0 ? 0 : left > this.canvasWidth - this.heiVie1.width ? this.canvasWidth -
						this.heiVie1
						.width : left,
					right: right < this.heiVie1.width ? this.heiVie1.width : right > this.canvasWidth ?
						this
						.canvasWidth : right
				}
			},
			userInfo_cas_move(res) {
				if (this.isDJUser) return
				let el = res.touches[0]
				let top = res.touches[0].clientY,
					bottom = res.touches[0].clientY + this.userView.height,
					left = res.touches[0].clientX,
					right = res.touches[0].clientX + this.userView.width;
				let right111 = right < this.userView.width ? this.userView.width : right > this.canvasWidth ?
					this
					.canvasWidth : right
				let bottom111 = bottom < this.userView.height ? this.userView.height : bottom > this.winHei ?
					this.winHei
					.height : bottom
				let Xtrue = el.clientX > this.QRCodeTouch.left && el.clientX < this.QRCodeTouch
					.right //(左边)是否和另一个在同一x轴
				let Ytrue = el.clientY > this.QRCodeTouch.top && el.clientY < this.QRCodeTouch
					.bottom //(左边)是否和另一个在同一Y轴
				let rightX = right111 > this.QRCodeTouch.left && right111 < this.QRCodeTouch
					.right //(右边)是否和另一个在同一x轴
				let bottomY = bottom111 > this.QRCodeTouch.top && bottom111 < this.QRCodeTouch
					.bottom //(右边)是否和另一个在同一Y轴
				if (Xtrue) { //判断是否在同一x上 方块右部触碰
					if (Ytrue || bottomY) {
						this.user_view_chushi(11111)
						uni.showToast({
							title: "头像不能放在分享二维码上哦",
							icon: "none"
						})
						this.isDJUser = true
					}

				}
				if (rightX) { //方块左部触碰
					if (bottomY || Ytrue) {
						this.user_view_chushi(11111)
						uni.showToast({
							title: "头像不能放在分享二维码上哦",
							icon: "none"
						})
						this.isDJUser = true
					}
				}
				if (Ytrue) { //方块底部触碰
					if (Xtrue || rightX) {
						this.user_view_chushi(11111)
						uni.showToast({
							title: "头像不能放在分享二维码上哦",
							icon: "none"
						})
						this.isDJUser = true
					}
				}

				if (bottomY) { //方块顶部触碰
					if (Xtrue || rightX) {
						this.user_view_chushi(11111)
						uni.showToast({
							title: "头像不能放在分享二维码上哦",
							icon: "none"
						})
						this.isDJUser = true
					}
				}
				this.userInfoTouch = {
					top: top < 0 ? 0 : top > this.winHei - this.userView.height ? this.winHei - this
						.userView.height : top,
					bottom: bottom < this.userView.height ? this.userView.height : bottom > this.winHei ?
						this.winHei
						.height : bottom,
					left: left < 0 ? 0 : left > this.canvasWidth - this.userView.width ? this.canvasWidth -
						this
						.userView
						.width : left,
					right: right < this.userView.width ? this.userView.width : right > this.canvasWidth ?
						this
						.canvasWidth : right
				}
			},
		}
	}
</script>

<style lang="less">
	.visibilityH{
		visibility: hidden
	}
	.canvasPage {
		.shareCanvas {
			position: relative;

			image {
				width: 100%;
			}

			.list {
				width: auto;
				height: auto;
				position: absolute;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					// width: 200rpx;
					// height: 200rpx;
					background-color: #f5f5f5;
				}

				.text {
					width: auto;
					margin-top: 10rpx;
					text-align: center;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.cart_box {
		width: 100vw;
		height: calc(constant(safe-area-inset-bottom) + 120rpx);
		height: calc(env(safe-area-inset-bottom) + 120rpx);
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99999;

		.view1 {
			width: 100%;
			height: 120rpx;

			view {
				width: 686rpx;
				height: 80rpx;
				background-color: #45806E;
				border-radius: 20rpx;

				text {
					font-size: 40rpx;
					color: #FFFFFF;
				}
			}

		}
	}
</style>
